<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>白名单管理页面</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	<style>
		body {}

		.white-list-nav-top {
			text-align: center;
			height: 44px;
			line-height: 44px;
			color: #fffefe;
			font-size: 18px;
		}

		.white-list-nav-top>.white-list-nav-top-sub {
			color: #fff;
			display: inline-block;
			overflow: hidden;
			min-width: 50px;
			min-height: 20px;
			text-align: center;
		}

		.white-list-nav-top>.white-list-btn-exit {
			float: left;
			background: url(../image/icon_left_arrow_white.png) no-repeat center;
			background-size: 10px 15px;
			margin-top: 10px;
		}
		.white-manage-select{
			background-color:#C2C2C2;
			font-size: 14px;
		}

		.white-list-nav-top>.white-list-nav-top-title{}

		.white-list-nav-top>.white-list-nav-top-right-msg {
			float: right;
		}
		/* 搜索导航栏 */

		.white-list-nav-top2 {
			background-color: #f7f7f7;
			height: 31px;
			line-height: 31px;
			padding: 10px 15px;
		}

		.white-list-nav-top-sub2 {
			display: inline-block;
			overflow: hidden;
			float: left;
			height: 31px;
			line-height: 31px;
		}

		.white-list-nav-top2 .white-list-btn {
			padding: 0 10px;
			text-align: center;
		}

		.white-list-nav-top2 .white-list-box-search {
			border-radius: 5px;
			background-color: #fff;
			border: #aaaaaa 1px solid;
			width: 100%;
		}

		.white-list-box-search .white-list-input-search {
			outline: none;
			background: url(../image/icon_search.png) no-repeat 10px 50%;
			background-size: 20px 20px;
			padding-left: 35px;
			min-height: 20px;
		}

		.white-list-btn-add {
			background: url(../image/icon_add.png) no-repeat center;
			background-size: 20px 20px;
			float: right;
		}

		.white-list-btn-search {
			padding: 5px;
			border: 1px #aaaaaa solid;
			border-radius: 5px;
			color: #101010;
			font-size: 14px;
			background-color: #fff;
			margin-left: 11px;
		}

		.white-list-nav-top-c1 {
			float: left;
			width: 72%;
		}

		.white-list-nav-top-c2 {
			float: left;
			width: 28%;
		}
		/* 白名单菜单 */

		.white-manage-menu-container {
			display: flex;
			display: -webkit-flex;
			display: -webkit-box;
			align-items: center;
			-webkit-box-align: center;
			background-color: #C2C2C2;
			padding: 15px 15px;
		}

		.white-manage-menu-container .white-manage-menu {
			height: 30px;
			line-height: 30px;
		}
	</style>
</head>

<body>
	<header style="background-color: #ff9f00;">
		<div class="white-list-nav-top">
			<div class="white-list-nav-top-sub white-list-btn-exit"></div>
			<div class="white-list-nav-top-sub white-list-nav-top-title">
				白名单管理
			</div>
			<div class="white-list-nav-top-sub white-list-nav-top-right-msg" id="btn-commit"></div>
		</div>
		<div class="white-manage-menu-container">
			<div>
				可管理的区域：<select class="white-manage-select" onchange="sele_Change()">

					          </select>
			</div>

		</div>
		<div class="white-list-nav-top2">
			<div class="white-list-nav-top-c1">
				<div class="white-list-nav-top-sub2 white-list-box-search">
					<input type="text" class="white-list-input-search" />
				</div>
			</div>
			<div class="white-list-nav-top-c2">
				<div class="white-list-nav-top-sub2 white-list-btn white-list-btn-search">
					搜索
				</div>
				<div class="white-list-nav-top-sub2 white-list-btn white-list-btn-add"></div>
			</div>
		</div>
	</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript" src="../script/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	//权限列表数据
	var mDatas = 0;
	//项目区域id，用以区别执行不同项目代码
	var mAreaID;
	//手机系统版本，用以区分Android和ios，以执行不同api
	var phoneSystem;
	var selectDiv;   //select 元素
	var mUserId = 0;
	apiready = function() {
		$api.fixStatusBar($api.dom('header'));
		listenerBackExitApp();
		phoneSystem = api.systemType;
		//整个应用的服务器ip固定为云ip=http://139.199.72.236:8081  测试ip=http://172.16.30.211:8080
		var agencyIP = 'http://139.199.72.236:8081';
		$api.setStorage('agencyIP', agencyIP);
		//测试 ----------------------------------------------------
		//requestJurisdictionList(10392);
		//测试时注释词句代码
		var isRight = getInitDatas();
		if (isRight) {
			requestJurisdictionList(mUserId);
		}
	};

	function initView() {
		var btnExit = document.getElementsByClassName('white-list-btn-exit')[0];
		//添加按钮
		var btnAdd = document.getElementsByClassName('white-list-btn-add')[0];
		//搜索按钮
		var btnSearch = document.getElementsByClassName('white-list-btn-search')[0];
		var searchContent = document.getElementsByClassName('white-list-input-search')[0];
    selectDiv = document.getElementsByClassName('white-manage-select')[0]; //
		var menuC = document.getElementsByClassName('white-manage-menu')[0];
		btnAdd.onclick = function() {
			api.openWin({
				name: 'page_update_add',
				url: './page_update_add.html',
				allowEdit: true
			});
		}
		btnSearch.onclick = function() {
				triggerEventOfSearch(searchContent.value);
			}
			//关闭程序
		btnExit.onclick = function() {
			closeWgtTips(1, null, '是否确认退出白名单管理');
		}
	}

	//区域选择事件
	function sele_Change(){
				var objS = document.getElementsByClassName('white-manage-select')[0];
				var get_map = objS.options[objS.selectedIndex].value;
				var selectData = clickMenuMethod();
				var id =  selectData[objS.selectedIndex].id;
				$api.setStorage('areaID', parseInt(id));
				mAreaID = id;
				console.log('........mAreaID.........'+mAreaID);
				api.sendEvent({
					name: 'updateWhiteListItem',
				});
	}

	/**
	 * 展示某个区域的白名单管理页面
	 * @param {Number} index - 点击的某条数据的index
	 */
	function showAreaWhiteManage(index) {
		if (mDatas == null || mDatas.length == 0) {
			return;
		}
		var ai = mDatas[index].protect_id;
		//选中某个区域，保存区域id
	 $api.setStorage('areaID', parseInt(ai));
		initView();
		mAreaID = ai;
		api.openFrame({
			name: 'frame_white_list',
			url: './frame_white_list.html',
			rect: {
				x: 0,
				y: $api.dom('header').offsetHeight,
				w: api.winWidth,
				h: 'auto'
			},
			allowEdit: true,
			reload: true
		});
		window.setTimeout(function(){
	    triggerEventOfSearch('');
		},500);

	}

	/**
	 * 点击了"选择区域白名单"，执行方法。
	 * @param {Object} view - Dom对象
	 */
	function clickMenuMethod() {
		var x = 0;
		var data = [];
		console.log("点击了选择区域的。。。。1");
		//根据返回数据的区域id，来显示不同区域的名字
		for (var i = 0; i < mDatas.length; i++) {
			var ai = mDatas[i].protect_id;
			switch (parseInt(ai)) {
				case AREAID_NSJDB:
					data.push({
						title: '南山街道办',
						id:ai
					});
					break;
				case AREAID_SZY:
					data.push({
						title: '深职院',
						id:ai
					});
					break;
				case AREAID_CWW:
					data.push({
						title: '蔡屋围',
						id:ai
					});
					break;
				case AREAID_LHJDB:
					data.push({
						title: '龙华街道办',
						id:ai
					});
					break;

				case AREAID_BNCZJ:
						data.push({
							title: '宝安财政局',
							id:ai
						});
						break;
				case AREAID_QY:
						data.push({
								title: '清研',
								id:ai
							});
						break;
				default:
			}
		}

		return data;
		console.log("点击了选择区域的。。。。。2" + data);
		data = JSON.stringify(data);
	}

	/**
	 * 获取状态栏高度
	 */
	function getStatusBarH() {
		var sys = api.systemType;
		if (sys === 'android') {
			return 25;
		} else if (sys === 'ios') {
			return 20;
		}
	}

	/**
	 * 获取权限列表
	 * @param {String} userid - 用户id
	 */
	function requestJurisdictionList(userid) {
		api.showProgress({});
		whiteListManage.queryJurisdictionList(userid, function(res) {
			console.log('requestJurisdictionList---res=' + JSON.stringify(res));
			api.hideProgress();
			if (res) {
				var code = res.code;
				if (code == 1) {
					mDatas = res.list;
					//预处理数据
					mDatas = preDealDatas(mDatas);
					console.log('preDealDatas=' + JSON.stringify(mDatas));
					setSelect();
					//默认显示权限列表的第一个
					showAreaWhiteManage(0);
				} else if (code == 0) {
					closeWgtTips(0, null, '您没有任何管理权限，点击“确定”退出。');
				} else {
					closeWgtTips(0, null, '很抱歉，服务器异常，请稍后再试。');
				}
			} else {
				closeWgtTips(0, null, '很抱歉，连接服务器失败，请稍后再试。');
			}
		});
	}

	//设置 Select 的值
	function setSelect(){
		var selectDivData = clickMenuMethod();
		for (var i = 0; i < selectDivData.length; i++) {
			$('.white-manage-select').append("<option value='"+i+"'>"+selectDivData[i].title+"</option>");
		}
	}

	/**
	 * 预处理获得的权限列表数据数据
	 * 判断app传的区域id是否存在权限列表中，存在，就显示此区域的数据，否，显示全部的数据。
	 * return 是，返回新的数组,否,不做改变。
	 */
	function preDealDatas(datas) {
		var tempDatas = [];
		for (var i = 0; i < datas.length; i++) {
			if (mAreaID == datas[i].protect_id) {
				tempDatas.push(datas[i]);
				datas = null;
				return tempDatas;
			}
		}
		return datas;
	}

	/**
	 * 获取从原生app传过来的数据，并且过滤数据以保证数据的正确性。
	 */
	function getInitDatas() {
		var appdatas;
		if ('android' === phoneSystem) {
			appdatas = api.appParam;
		} else if ('ios' === phoneSystem) {
			appdatas = api.pageParam;
		} else {
			closeWgtTips(0, null, "当前只支持android和ios");
			return false;
		}
		//将不是JSON格式的数据转换为json，以便之后API调用统一。
		if (!isJson(appdatas)) {
			appdatas = JSON.parse(appdatas);
		}
		try {
			var userid = appdatas.userid;
			var areaid = appdatas.areaid;
			console.log('areaid=' + areaid + '    userid=' + userid);
		} catch (e) {
			closeWgtTips(0, null, "app传入数据异常=" + JSON.stringify(appdatas));
			return false;
		}
		//传入的数据不能空
		if (userid == null || areaid == null) {
			closeWgtTips(0, null, "app传入数据异常=" + JSON.stringify(appdatas));
			return false;
		}
		mUserId = userid;
		mAreaID = areaid;
		return true;
	}

	//判断obj是否为json对象
	function isJson(obj) {
		var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
		return isjson;
	}

	//触发“搜索事件”。
	function triggerEventOfSearch(searchContent) {
		api.sendEvent({
			name: 'searchClick',
			extra: {
				searchContent: searchContent
			}
		});
	}

	/**
	 * 关闭widget的提示，分多种提示类型（显示的提示样式不一样）。
	 * @param {Number} type - 提示显示类型;0==alert;1==confirm;
	 * @param {String} title - 提示的标题,输入null，默认显示“温馨提示”。
	 * @param {String} msg - 提示的内容
	 */
	function closeWgtTips(type, title, msg) {
		title == null ? title = '温馨提示' : title;
		switch (type) {
			case 0:
				api.alert({
					title: title,
					msg: msg
				}, function(ret, err) {
					closeMethod();
				});
				break;
			case 1:
				api.confirm({
					title: title,
					msg: msg
				}, function(ret, err) {
					if (ret.buttonIndex == 2) {
						closeMethod();
					}
				});
				break;
		}
	}

	//关闭当前superwebview，ios和android执行的方法不一致。
	function closeMethod() {
		if ('android' === phoneSystem) {
			api.closeWidget({
				id: api.appId,
				silent: true
			});
		} else if ('ios' === phoneSystem) {
			api.closeWin({});
		}
	}

	//设置“返回键”的监听。
	function listenerBackExitApp() {
		api.addEventListener({
			name: 'keyback'
		}, function(ret, err) {
			closeWgtTips(1, null, '是否确认退出白名单管理');
		});
	}
</script>

</html>
